@charset "utf-8";

.goods_genre {
    font-size: 13px;

    > div {
        width: 100%;
        font-size: 0;
        overflow: hidden;
        margin-bottom: 10px;

        * {
            box-sizing: border-box;
        }

        >i {
            display: block;
            float: left;
            width: 15%;
            padding-top: 15%;
            position: relative;
            background-color: #ffffff;
            border: 1px solid #efefef;
            overflow: hidden;

            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                max-width: 80%;
                max-height: 80%;
            }
        }

        strong {
            display: block;
            float: right;
            width: 82%;
            font-size: 14px;
            text-align: justify;
            margin-left: 3%;
            font-weight: bold;
            line-height: 1.5em;
            height: 3em;
            overflow: hidden;
            word-break: break-all;
        }

        span {
            @extend strong;
            font-weight: normal;
            margin-top: 3px;
            height: 1.5em;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666666;

            * {
                font-weight: bold;
                color: #eb413d;
            }

            i {
                font-style: normal;
                margin-right: -2px;
            }
        }
    }

    table {
        width: 100%;
        line-height: 32px;
        table-layout: fixed;

        thead {
            th {
                text-align: center;
                background-color: #f1f1f1;
                border: 1px solid #e6e6e5;
                color: #a8a8a8;
            }
        }

        tbody {
            tr {
                &:first-child {
                    background-color: #fbfbfc;

                    td {
                        color: #a8a8a8;
                    }
                }

                td {
                    border: 1px solid #e6e6e5;
                    text-align: center;
                    vertical-align: middle;
                    position: relative;
                    color: #6c6c6d;

                    input {
                        width: 40px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 13px;
                        background: none;
                        outline: none;
                        border: none;
                        text-align: center;
                        padding-left: 8px;
                        padding-right: 8px;
                        box-sizing: border-box;
                        color: #6c6c6d;
                    }

                    i {
                        display: block;
                        visibility: hidden;
                        opacity: 0;
                        transition: all 300ms ease;
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 16px;
                        font-style: normal;
                        cursor: pointer;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        -moz-user-select: none;
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        -khtml-user-select: none;
                        color: #6c6c6d;
                        &:hover {
                            background-color: #efefef;
                        }
                    }

                    i[data-role="subtract"] {
                        left: 3px;
                    }

                    i[data-role="add"] {
                        right: 3px;
                    }
                    &:hover {
                        i {
                            visibility: visible;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    > p {
        font-size: 0;
        line-height: 0;
        text-align: center;

        span {
            font-size: 13px;
            line-height: 42px;
            color: #878787;

            ~span {
                margin-left: 32px;
            }
        }
    }
}
